<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>患者列表</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
      .hospital > div{
        width: 100%;
        height: 40px;
        margin-top: 5px;
      }
      .hospital > div:nth-of-type(odd){
        background-color: #ddd;
      }
      .hospital > div:nth-of-type(even){
        background-color: #8bcdfb;
      }
      .hospital > div > span{
        padding-left: 5px;
        display: inline-block;
        height: 40px;
        line-height: 40px;
      }
      .aui-searchbar-input{
            height: 10px;
        }
      .aui-list-item-inner > div{
        display: -webkit-flex;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
      }
      .aui-list-item-inner > div >span:nth-child(1){
        text-align: left;
        padding-left: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
      }
      .aui-list-item-inner > div >span:nth-child(1){
        flex: 0.3;
      }
      .aui-list-item-inner > div >span{
        flex: 1;
        text-align: center;
        font-size: 14px;
      }
      .aui-list-item-inner > div >span:nth-child(2),.aui-list-item-inner > div >span:nth-child(3){
        flex: 0.7;
      }
      .aui-list-item-inner > div >span:nth-child(4){
        flex: 0.6 !important;
      }
      .aui-list-item-inner > div >span:nth-child(2){
        display: inline-block;
        background-image: url('../image/nickname.png');
        width: 100px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: 10px 5px;
        background-size: 20px 20px;
        line-height: 40px;
        text-align: left;
        padding-left: 40px;
      }
      .aui-list-item-inner > div >span:nth-child(4){
        display: inline-block;
        width: 100px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: 25px 5px;
        background-size: 25px 25px;
        line-height: 40px;
      }
      .aui-btn-info,.aui-btn-danger{
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 10px;
        padding: 10px 10px 13px 10px !important;
      }
      
      .aui-btn-danger{
        background-color: #d4237a !important;
      }
      .aui-content ul li:nth-of-type(odd){ background:#f0f0f0;}


       /* 搜索 */
    .top-search {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 3rem !important;
    }
    </style>
</head>

<body>
    <section class="hospital">
      <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item" @click="PatientDetails(item.F_ID)"  v-for="(item, index) in evaluationList" style="evenodd">
                <div class="aui-list-item-inner">
                    <div>
                      <span>{{index + 1}}</span>
                      <span>{{item.F_paientname}}</span>
                      <span>{{item.F_patientphone }}</span>
                      <span v-if="item.F_patientsex === '男'" :style="manIcon"></span>
                      <span v-if="item.F_patientsex === '女'" :style="womanIcon"></span>
                      <span>{{item.F_zhuyuannumber}}</span>
                      <span style="color: #f8ac591;" v-if="item.F_reservestate === '已排舱'">{{item.F_reservestate }}</span>
                      <span style="color: #23b7e5;"  v-else-if="item.F_reservestate === '待排舱'">{{item.F_reservestate }}</span>
                      <span style="color: #ed5565;" v-else-if ="item.F_reservestate === '已结束'">{{item.F_reservestate }}</span>
                      <span style="color: #7266ba;"  v-else-if  ="item.F_reservestate === '已暂停'">{{item.F_reservestate }}</span>
                      <span style="color: #8f8d9c;"  v-else-if="item.F_reservestate === '长期失约'">{{item.F_reservestate }}</span>
                      <span v-else >{{item.F_reservestate }}</span>
                    </div>
                </div>
            </li>
        </ul>
      </div>
    </section>
</body>

</html>

<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../js/ToConfigure.js" charset="utf-8"></script>
<script type="text/javascript">
var vm = null;
  apiready = function () {

    vm = new Vue({
      el: '.hospital',
      data: {
        manIcon: {
          backgroundImage: "url(../image/sex_man.png)"
        },
        womanIcon: {
          backgroundImage: "url(../image/sex_woman.png)"
        },
        copyEvaluationList: [],
        evaluationList: [],
        JsParms: {
          PageSize: 10,
          CurrPage: 1,
        }
      },
      created(){
       var JsonStr = JSON.stringify(this.JsParms);
        refreshHeaderData(JsonStr)
      },
      methods: {
        PatientDetails: function(F_ID) {
          api.openWin({
              name: 'patientDetailHeader',
              url: './patientDetailHeader.html',
              pageParam: {
                  F_ID: F_ID
              }
          });
        }
      }
    })

    if(api.pageParam.info !== undefined){
      vm.copyEvaluationList = vm.evaluationList
      vm.evaluationList = [];
      var info = JSON.parse(api.pageParam.info)
      vm.evaluationList.push(info)
    }

    // // 下拉监听
    // var param = {};
    // param.loadingImgae = 'widget://image/refresh.png'; //定义刷新小箭头的图片
    // param.bgColor = 'transparent'; //定义下拉刷新区域的背景
    // param.textColor = '#111'; //定义下拉刷新提示文字的颜色
    // param.textDown = '下拉刷新...'; //定义下拉刷新文字
    // param.textUp = '松开试试...'; //定义松开刷新文字
    // param.showTime = true; //定义是否显示最后一次刷新时间
    // api.setRefreshHeaderInfo(param, function(ret, err){
    //   vm.evaluationList = vm.copyEvaluationList
    //   setTimeout(() => {
    //     api.refreshHeaderLoadDone(); //复位下拉刷新
    //   }, 500)
    // });

    // 加载监听
    api.addEventListener({name:'scrolltobottom'}, function(ret, err){
        vm.JsParms.CurrPage++;
        if(vm.JsParms.MaxPage >= vm.JsParms.CurrPage){
          api.showProgress({
              title: '努力加载中...',
              text: '',
              modal: true
            });
        var JsonStr = JSON.stringify(vm.JsParms);
        refreshHeaderData(JsonStr)
        }
    });
  }


  //查询患者信息
  function refreshHeaderData(JsonStr) {
    //获取所属医院IP地址
    var Url_IP = ToConfigure_IP("Gorgeous");
    // var JsParms = new Object();
    // JsParms.F_paientname = document.getElementById("aiName").value;
    // alert(JsParms.F_paientname);
    // var JsonStr = JSON.stringify(JsParms);
    api.ajax({
        url: Url_IP+'AppointmentRegistration/Query_AppointmentRegistrationPB',
        data: {
            values: {
                parms: JsonStr
            }
        },
        method: 'post',
    },function(ret, err){
        if (ret!="") {
          if(ret[0].MaxPage){
            vm.JsParms.MaxPage = ret[0].MaxPage;
          }
          vm.evaluationList = vm.evaluationList.concat(ret);
          api.hideProgress()
        } else {
            api.hideProgress()
        }
    });
  }
  
  function enterEvaluation() {
    api.openWin({
        name: 'evaluation-header',
        url: './evaluation-header.html',
        pageParam: {
            name: 'evaluation-header'
        }
    });
  }
  function enterConsent() {
    api.openWin({
        name: 'consent-header',
        url: './consent-header.html',
        pageParam: {
            name: 'consent-header'
        }
    });
  }
</script>
